@baseWidth: 720;
.px2rem(@atr,@px,@base-width:0) when( @base-width > 0){
	@{atr}: unit(@px*10/@base-width , rem);
}

.px2rem(@atr,@px,@base-width:0) when( @base-width = 0){
	@{atr}: unit(@px*10/@baseWidth , rem);
}

.Nav{
    .items{
        position: relative;
        text-align: center;
        .px2rem(margin-top, 8);
        .px2rem(margin-bottom, 8);
        &.col-6{
            width: 25%;
            padding: 0.5%;
            float: left;
            flex: 0 0 auto;
        }
        span{
            color: #333;
            display: block;
            .px2rem(font-size, 22);
            .px2rem(margin-top, 5);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .icon{
            .px2rem(font-size, 64);
            .px2rem(line-height, 64);
            background-image: -webkit-linear-gradient(top,#4482ff,#2ca3ff 50%,#13c3ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        &:nth-child(4n-2){
            .icon{
                background: -webkit-linear-gradient(top,#57ddb2,#42cfc3 50%,#2dc0d3);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        &:nth-child(4n-1){
            .icon{
                background: -webkit-linear-gradient(top,#fece02,#fbad00);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        &:nth-child(4n){
            .icon{
                background: -webkit-linear-gradient(top,#ac73ff,#956aff 50%,#7e60ff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }
}